<template>
    <div style="background: #d7e1ed; display: flex; flex-direction: column; justify-content:space-between;height: 100%">
      <Header>
        <div class="preview-header">
          <Menu mode="horizontal" theme="dark" active-name="1">
            <div class="layout-logo"></div>
            <div class="layout-nav">
              <MenuItem name="1" @click="on-select()">
                <Icon type="ios-home"></Icon>
                首页
              </MenuItem>
              <MenuItem name="2">
                <Icon type="ios-book"></Icon>

                前端日记
              </MenuItem>
              <MenuItem name="3">
                <Icon type="ios-flask"></Icon>
                奇淫技巧
              </MenuItem>
              <MenuItem name="4">
                <Icon type="ios-paper"></Icon>
                自我介绍
              </MenuItem>
              <MenuItem name="5">
                <Icon type="log-in"></Icon>
                登录
              </MenuItem>
            </div>
          </Menu>
        </div>
      </Header>
      <Content>
        <router-view/>
      </Content>
      <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        articleTitle: '',
        tagsList: '',
        classificationSelected: [],
        content: '',
        publishTime: ''
      };
    },
    mounted() {

      this.articleTitle = localStorage.articleTitle;
      this.tagsList = localStorage.tagsList ? JSON.parse(localStorage.tagsList) : [];
      this.classificationSelected = localStorage.classificationSelected ? JSON.parse(localStorage.classificationSelected) : [];
      this.content = localStorage.content;
      this.publishTime = localStorage.publishTime;
    },
    methods:{
dd(){
  console.log(1)
}
    }
  }
</script>
<style scoped lang="less">


  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .layout-nav {
    width: 550px;
    margin: 0 auto;
    margin-right: 20px;
  }



  .margin-top-8 {
    margin-top: 8px;
  }

  .margin-top-10 {
    margin-top: 10px;
  }

  .margin-top-20 {
    margin-top: 20px;
  }

  .margin-left-10 {
    margin-left: 10px;
  }

  .margin-bottom-10 {
    margin-bottom: 10px;
  }

  .margin-bottom-100 {
    margin-bottom: 100px;
  }

  .margin-right-10 {
    margin-right: 10px;
  }

  .padding-left-6 {
    padding-left: 6px;
  }

  .padding-left-8 {
    padding-left: 5px;
  }

  .padding-left-10 {
    padding-left: 10px;
  }

  .padding-left-20 {
    padding-left: 20px;
  }

  .height-100 {
    height: 100%;
  }

  .height-120px {
    height: 100px;
  }

  .height-200px {
    height: 200px;
  }

  .height-492px {
    height: 492px;
  }

  .height-460px {
    height: 460px;
  }

  .line-gray {
    height: 0;
    border-bottom: 2px solid #dcdcdc;
  }

  .notwrap {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .padding-left-5 {
    padding-left: 10px;
  }

  [v-cloak] {
    display: none;
  }
</style>
